<script setup lang="ts">
import { getProjectFunctionAPI, getProjectIntroductionAPI } from '@/api/agriculture.ts';
import router from '@/router';
import { useGovernmentStore } from '@/stores/governmentLinkData.ts';
import { useImageStore } from '@/stores/Image.ts';
import { useKnowledgeStore } from '@/stores/KnowledgeData.ts';
import { useConsultationStore } from '@/stores/policyList.ts';
import { useResearchStore } from '@/stores/researchLinkData.ts';
import { useResultStore } from '@/stores/resultData.ts';
import { BarChartOutlined, ProfileOutlined } from '@ant-design/icons-vue';
import { ClockIcon } from 'lucide-vue-next';
import { inject } from 'vue';

interface LinkItem {
  url: string;
  description: string;
}

// 使用 inject 获取 views 变量
const views = inject<Ref<number>>('views');

// Pinia
const store = useImageStore();
const resultStore = useResultStore();
const KnowledgeStore = useKnowledgeStore();
const ConsultationStore = useConsultationStore();
const researchStore = useResearchStore();
const governmentStore = useGovernmentStore();

// 项目概况
const prjInfos = ref<any[]>([]);
const prjFuncs = ref<any[]>([]);
const isLoading = ref<boolean>(false);

// 获取项目概况数据
const getProjectIntroduction = async () => {
  isLoading.value = true;
  try {
    const res = await getProjectIntroductionAPI();
    const { data } = res;
    prjInfos.value = data.map((item: any) => ({
      id: item.id,
      title: item.attributes.title,
      content: item.attributes.information,
    }));
  } catch (error) {
    console.error('Error fetching project introduction data:', error);
  } finally {
    isLoading.value = false;
  }
};
const getProjectFunction = async () => {
  isLoading.value = true;
  try {
    const res = await getProjectFunctionAPI();
    const { data } = res;
    prjFuncs.value = data.map((item: any) => ({
      title: item.attributes.title,
      content: item.attributes.information,
    }));
  } catch (error) {
    console.error('Error fetching project function data:', error);
  } finally {
    isLoading.value = false;
  }
};
getProjectIntroduction();
getProjectFunction();

// 路由跳转
function goToPoliciesView() {
  router.push('/agriculture/PoliciesView');
}
function goToKnowledgeView() {
  router.push('/agriculture/KnowledgeView');
}
function goToLinkView() {
  router.push('/agriculture/LinkView');
}
function goToAchievementView() {
  router.push('/agriculture/AchievementView');
}

function goToLink(link: string) {
  // 在新标签页中打开链接
  window.open(link, '_blank');
}

// 跳转到详细页面
const goToDetailPage = (id: string) => {
  router.push({ name: 'KPDetailPage', params: { id } });
};
const goToCGDetailPage = (id: string) => {
  router.push({ name: 'CGDetailPage', params: { id } });
};

onMounted(() => {
  store.getCarousels();
  resultStore.updateResultData();
  KnowledgeStore.getHomeInvasiveSpecie();
  ConsultationStore.getPolicyList();
  researchStore.updateResearchLink();
  governmentStore.updateGovernmentLink();
});
</script>

<template>
  <div class="my-8 mt-10 flex w-full">
    <!-- 轮播图部分 -->
    <div class="flex-1">
      <div v-if="store.carousels.length > 0">
        <el-carousel v-loading="store.carouselLoading" height="450px" :interval="5000">
          <el-carousel-item v-for="(carousel, index) in store.carousels" :key="index">
            <img :src="carousel.src" alt="轮播图" class="h-full w-full object-cover" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-empty v-else class="m-auto" description="暂无数据" />
    </div>

    <div class="table-shadow ml-6 w-[525px] bg-white p-5">
      <div
        class="flex items-center justify-between bg-white"
        style="border-bottom: 2px solid rgb(41, 156, 12)"
      >
        <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
          <span class="mx-4 flex items-center text-xl font-bold text-white">
            <BarChartOutlined class="mr-1.5 text-white" style="font-size: 1.5rem" />
            政策法规
          </span>
        </div>
      </div>
      <div
        v-if="ConsultationStore.getLawConsultationData.length > 0"
        class="mt-2 min-h-[250px] bg-white"
      >
        <ul v-loading="ConsultationStore.getLawLoading" class="min-h-[300px]">
          <li
            v-for="(item, index) in ConsultationStore.getLawConsultationData.slice(0, 5)"
            :key="index"
          >
            <div class="mb-4 flex items-center">
              <!-- 圆点 -->
              <div class="mr-3 min-h-2.5 min-w-2.5 rounded-full bg-green-500" />
              <div>
                <span
                  @click="goToLink(item.url)"
                  class="cursor-pointer text-sm text-gray-600 hover:text-blue-500"
                >
                  {{ item.title }}
                </span>
                <span class="block text-sm text-gray-400">
                  {{ item.date }}
                </span>
              </div>
            </div>
          </li>
        </ul>
        <div class="flex cursor-pointer items-center justify-center text-sky-400">
          <el-button type="success" plain @click="goToPoliciesView">查看更多</el-button>
        </div>
      </div>
      <el-empty v-else class="m-auto" description="暂无数据" />
    </div>
  </div>

  <div class="table-shadow my-8 mt-4 bg-white p-4">
    <div
      class="flex items-center justify-between bg-white"
      style="border-bottom: 2px solid rgb(41, 156, 12)"
    >
      <!-- 成果展示部分，左对齐 -->
      <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
        <span class="mx-4 text-xl font-bold text-white">成果展示</span>
      </div>
    </div>
    <div v-if="resultStore.getResultData.length > 0" class="mt-2 bg-white">
      <div
        v-loading="resultStore.getResultLoading"
        class="relative flex min-h-[240px] items-center justify-center"
      >
        <div class="scrollbar-hide flex space-x-6 overflow-x-auto py-4">
          <div
            v-for="(achievement, index) in resultStore.getResultData.slice(0, 6)"
            :key="index"
            class="group flex-shrink-0 cursor-pointer"
            @click="goToCGDetailPage(achievement.id)"
          >
            <!-- 图片卡片 -->
            <div
              class="relative overflow-hidden rounded-md shadow-md transition-all duration-300 group-hover:shadow-xl"
            >
              <img
                class="h-[180px] w-[210px] transform object-cover transition-transform duration-300 ease-out group-hover:scale-105"
                :src="achievement.image"
                :alt="achievement.title || '成果图片'"
              />
              <!-- 悬停遮罩 -->
              <div
                class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 transition-all duration-300 group-hover:bg-opacity-20"
              >
                <div class="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                  <svg
                    class="h-8 w-8 text-white"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    ></path>
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                    ></path>
                  </svg>
                </div>
              </div>
            </div>
            <!-- 日期标签 -->
            <div class="mt-3 text-center">
              <p class="inline-block text-sm font-medium text-gray-500">
                {{ achievement.date }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-center">
        <el-button type="success" plain @click="goToAchievementView">查看更多</el-button>
      </div>
    </div>
    <el-empty v-else class="m-auto" description="暂无数据" />
  </div>

  <div class="table-shadow my-8 mt-4 bg-white p-4">
    <div class="bg-white" style="border-bottom: 2px solid rgb(41, 156, 12)">
      <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
        <span class="mx-4 flex items-center text-xl font-bold text-white">
          <ProfileOutlined class="mr-1.5 text-white" style="font-size: 1.5rem" />
          项目介绍
        </span>
      </div>
    </div>
    <div v-if="prjInfos.length > 0 && prjFuncs.length > 0" class="mt-2 min-h-[250px] bg-white p-6">
      <div v-loading="isLoading" class="min-h-[800px]">
        <!-- 项目介绍内容 -->
        <div v-for="prjInfo in prjInfos" :key="prjInfo.id" class="project-info-vertical">
          <div class="project-title">
            <h2>{{ prjInfo.title }}</h2>
          </div>
          <img src="@/assets/images/qht.png" alt="" />
          <div>
            <p style="text-indent: 2em">{{ prjInfo.content }}</p>
            <br />
          </div>
        </div>
        <hr class="styled-hr" />
        <!-- 项目功能内容 -->
        <div
          v-for="(prjFunc, index) in prjFuncs"
          :key="index"
          class="project-function-vertical mb-2 flex items-center"
        >
          <!-- 圆点图标 -->
          <div class="mr-3 min-h-2.5 min-w-2.5 rounded-full bg-green-500" />
          <div class="flex flex-col">
            <div>
              <span>{{ prjFunc.title }}</span>
              <img src="@/assets/images/qht.png" alt="" />
            </div>
            <div>
              <p style="text-indent: 2em">{{ prjFunc.content }}</p>
              <br />
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else class="m-auto" description="暂无数据" />
  </div>

  <div class="table-shadow my-8 mt-4 bg-white p-4">
    <div class="bg-white" style="border-bottom: 2px solid rgb(41, 156, 12)">
      <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
        <span class="mx-4 flex items-center text-xl font-bold text-white"> 入侵物种 </span>
      </div>
    </div>
    <div v-if="KnowledgeStore.getTabImages.length > 0" class="mt-2 bg-white">
      <div v-loading="KnowledgeStore.getTabImagesLoading" class="min-h-[250px] flex-grow">
        <div class="image-grid flex justify-center space-x-4 overflow-x-auto py-4">
          <div
            v-for="(image, index) in KnowledgeStore.getTabImages"
            :key="index"
            class="image-item flex-shrink-0"
          >
            <div class="mx-16">
              <img
                @click="goToDetailPage(image.id)"
                class="h-[180px] w-[210px] transform cursor-pointer transition-transform duration-200 ease-in-out hover:scale-105"
                :src="image.src"
                alt=""
              />
            </div>
            <p class="mt-4 text-center text-xl font-semibold leading-tight text-gray-800">
              {{ image.ChineseName }}
            </p>
            <p class="mt-2 text-center text-sm text-gray-500">
              {{ image.scientificName }}
            </p>
          </div>
        </div>
      </div>

      <!-- 按钮居中对齐，并固定在底部 -->
      <div class="mt-4 flex justify-center">
        <el-button type="success" plain @click="goToKnowledgeView">查看更多</el-button>
      </div>
    </div>
    <el-empty v-else class="m-auto" description="暂无数据" />
  </div>

  <div class="table-shadow my-8 mt-4 bg-white p-4">
    <div class="bg-white" style="border-bottom: 2px solid rgb(41, 156, 12)">
      <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
        <span class="mx-4 text-xl font-bold text-white">友情链接</span>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="mt-2 bg-white">
      <!-- 链接展示区域 -->
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <!-- 政府机构链接 -->
        <div
          v-if="governmentStore.LinkSets && governmentStore.LinkSets.length > 0"
          class="col-span-full"
        >
          <h3
            class="mb-3 flex items-center border-l-4 border-[#299c0c] pl-3 text-lg font-semibold text-gray-800"
          >
            政府机构
          </h3>
          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            <a
              v-for="(link, index) in governmentStore.LinkSets.slice(0, 6) as LinkItem[]"
              :key="`government-${index}`"
              :href="link?.url"
              target="_blank"
              rel="noopener noreferrer"
              class="group rounded-lg border border-gray-200 bg-gray-50 p-4 transition-all duration-200 hover:border-green-300 hover:bg-green-50 hover:shadow-md"
            >
              <div class="flex items-center">
                <div
                  class="mr-3 h-2 w-2 rounded-full bg-green-500 transition-transform group-hover:scale-125"
                ></div>
                <span class="flex-1 truncate font-medium text-gray-700 group-hover:text-gray-900">
                  {{ link?.description }}
                </span>
                <svg
                  class="ml-2 h-4 w-4 text-gray-400 opacity-0 transition-all group-hover:text-green-600 group-hover:opacity-100"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                  ></path>
                </svg>
              </div>
            </a>
          </div>
        </div>

        <!-- 研究机构链接 -->
        <div
          v-if="researchStore.LinkSets && researchStore.LinkSets.length > 0"
          class="col-span-full mb-6"
        >
          <h3
            class="mb-3 flex items-center border-l-4 border-[#299c0c] pl-3 text-lg font-semibold text-gray-800"
          >
            研究论文
          </h3>
          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            <a
              v-for="(link, index) in researchStore.LinkSets as LinkItem[]"
              :key="`research-${index}`"
              :href="link?.url"
              target="_blank"
              rel="noopener noreferrer"
              class="group rounded-lg border border-gray-200 bg-gray-50 p-4 transition-all duration-200 hover:border-blue-300 hover:bg-blue-50 hover:shadow-md"
            >
              <div class="flex items-center">
                <div
                  class="mr-3 h-2 w-2 rounded-full bg-blue-500 transition-transform group-hover:scale-125"
                ></div>
                <span class="flex-1 truncate font-medium text-gray-700 group-hover:text-gray-900">
                  {{ link?.description }}
                </span>
                <svg
                  class="ml-2 h-4 w-4 text-gray-400 opacity-0 transition-all group-hover:text-blue-600 group-hover:opacity-100"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                  ></path>
                </svg>
              </div>
            </a>
          </div>
        </div>

        <!-- 如果没有链接数据，显示"敬请期待" -->
        <div
          v-if="
            (!researchStore.LinkSets || researchStore.LinkSets.length === 0) &&
            (!governmentStore.LinkSets || governmentStore.LinkSets.length === 0)
          "
          class="col-span-full flex flex-col items-center justify-center py-8"
        >
          <clock-icon class="mb-3 h-12 w-12 text-gray-400" />
          <p class="text-xl font-medium text-gray-700">敬请期待</p>
          <p class="mt-2 text-gray-500">更多友情链接即将上线</p>
        </div>
      </div>

      <!-- 查看更多按钮 -->
      <div class="mt-4 flex justify-center">
        <el-button type="success" plain @click="goToLinkView">查看更多</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.styled-hr {
  border: none;
  height: 2px; /* 下划线高度 */
  background: linear-gradient(to right, #f06, #4a90e2); /* 渐变色 */
  margin: 20px 0; /* 上下边距 */
}

.table-shadow {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
</style>
